<template lang="pug">
    #enterprise
        Loading(:loading="isLoading")
        //- 移动端操作工具栏
        .toolbar-mobile(v-if="isMobile" :class="isRotate ? 'rotate-y' : 'rotate-x'" :style="isRotate ? toolbarStyle : ''")
            ul
                li(@click="onExitPage")
                    img(src="@common/assets/image/exit.png")
                    span Exit
                li
                li(@click="onResetSVG")
                    img(src="@common/assets/image/reset.png")
                    span Reset
                li
                li(@click="onRotateSVG")
                    img(v-if="isRotate" src="@common/assets/image/vertical.png")
                    img(v-else src="@common/assets/image/horizontal.png")
                    span {{ isRotate ? 'Vertical' : 'Horizontal' }}
        //- PC端操作工具栏
        .toolbar-pc(v-else)
            ul
                li(@click="onFullScreen")
                    img(src="@common/assets/image/qp.png")
                    span {{ isScreenState ? '退出' : '全屏' }}
                li(@click="onMagnifySVG") 
                    img(src="@common/assets/image/fd.png")
                    span 放大
                li(@click="onShrinkSVG")
                    img(src="@common/assets/image/sx.png")
                    span 缩小
                li(@click="onShowExpandAll")
                    img(v-if="isShowExpandAll" src="@common/assets/image/sq.png")
                    img(v-else src="@common/assets/image/zk.png")
                    span {{ isShowExpandAll ? '收起' : '展开' }}
                li(@click="onResetSVG")
                    img(src="@common/assets/image/cz.png")
                    span 还原
                li(@click="onDownload")
                    img(src="@common/assets/image/xz.png")
                    span 保存
</template>

<script>
import * as d3 from 'd3'
import Loading from '@components/Loading'
import { commonCreateModule, commonIncident } from '@common/d3/common'
import { isMobile } from '@common/utils/util'
// 可直接使用天眼查数据
import mockData from './mock.json'

export default {
    name: 'enterprise',
    props: {},
    components: { Loading },
    data() {
        return {
            isLoading: false, // 加载
            isMobile: isMobile(), // 设备类型判断
            isRotate: false, // 是否旋转
            screenWidth: 0, // 屏幕宽
            screenHeight: 0, // 屏幕高
            isScreenState: false, // 是否全屏展示
            isShowExpandAll: true, // 是否展示所有扩展数据
            toolbarStyle: '', // 工具栏样式
            // 公司名称数据
            companyName: '',
            // 基础容器组件
            SVG: null,
            zoomHandler: null,
            basicsG: null,
            // 减号图标
            COLLAPSE_ICON: 'M-4 -1 H4 V1 H-4 Z',
            // 加号图标
            EXPAND_ICON: 'M-4 -1 H-1 V-4 H1 V-1 H4 V1 H1 V4 H-1 V1 H-4 Z',
            /* 展示项映射配置数据
             * translate => 该组件创建位置
             * arrowsIcon => 箭头数据
             * content => 内容配置
             * fill => 背景色
             * icon => 图标配置
             */
            exhibitionContentData: {
                holderG: {
                    id: 1,
                    name: '股东',
                    width: 92,
                    data: [],
                    translate: 'translate(-260,-123)',
                    arrowsIcon: 'translate(-145,-53.5),rotate(30)',
                    content: {
                        translate: 'translate(28,10)',
                        text1: {
                            x: 12,
                            y: 14,
                        },
                        text2: {
                            x: 17.9921875,
                            y: 32,
                        },
                    },
                    fill: '#E05A48',
                    icon: {
                        translate: 'translate(14,28)',
                    },
                },
                staffG: {
                    id: 2,
                    name: '高管',
                    width: 92,
                    data: [],
                    translate: 'translate(-260,-28)',
                    arrowsIcon: 'translate(-149, 0)',
                    content: {
                        translate: 'translate(28,10)',
                        text1: {
                            x: 12,
                            y: 14,
                        },
                        text2: {
                            x: 20.3984375,
                            y: 32,
                        },
                    },
                    fill: '#1B91BA',
                    icon: {
                        translate: 'translate(14,28)',
                    },
                },
                inverstG: {
                    id: 3,
                    name: '对外投资',
                    width: 92,
                    data: [],
                    translate: 'translate(168, -123)',
                    arrowsIcon: 'translate(119,-38),rotate(-30)',
                    content: {
                        translate: 'translate(16,10)',
                        text1: {
                            x: 0,
                            y: 14,
                        },
                        text2: {
                            x: 20.3984375,
                            y: 32,
                        },
                    },
                    fill: '#A66FC8',
                    icon: {
                        translate: 'translate(78,28)',
                    },
                },
                branchG: {
                    id: 4,
                    name: '分支机构',
                    width: 92,
                    data: [],
                    translate: 'translate(168, -28)',
                    arrowsIcon: 'translate(119, 0)',
                    content: {
                        translate: 'translate(16,10)',
                        text1: {
                            x: 0,
                            y: 14,
                        },
                        text2: {
                            x: 20.3984375,
                            y: 32,
                        },
                    },
                    fill: '#4C955A',
                    icon: {
                        translate: 'translate(78,28)',
                    },
                },
                historyHolderG: {
                    id: 5,
                    name: '历史股东',
                    width: 128,
                    data: [],
                    translate: 'translate(-260, 69)',
                    arrowsIcon: 'translate(-146.4,54.2),rotate(-30)',
                    content: {
                        translate: 'translate(28,10)',
                        text1: {
                            x: 18,
                            y: 14,
                        },
                        text2: {
                            x: 38.3984375,
                            y: 32,
                        },
                    },
                    fill: '#FF7D18',
                    icon: {
                        translate: 'translate(14,28)',
                    },
                },
                historyLegalG: {
                    id: 6,
                    name: '历史法定代表人',
                    width: 128,
                    data: [],
                    translate: 'translate(132, 69)',
                    arrowsIcon: 'translate(145.9,55.6),rotate(-150)',
                    content: {
                        translate: 'translate(28,10)',
                        text1: {
                            x: 0,
                            y: 14,
                        },
                        text2: {
                            x: 38.3984375,
                            y: 32,
                        },
                    },
                    fill: '#FF7D18',
                    icon: {
                        translate: 'translate(14,28)',
                    },
                },
            },
        }
    },
    created() {
        // 初始化屏幕状态
        this.isScreenState = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement)
        // 屏幕状态变化监听
        window.onresize = () => {
            this.isScreenState = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement)
        }
    },
    mounted() {
        // 查询信息
        this.getMockData()
    },
    methods: {
        // 查询企业信息
        getMockData() {
            this.isLoading = true
            new Promise(resolve => {
                setTimeout(() => {
                    resolve(mockData)
                }, 1500)
            }).then(res => {
                if (res.state === 'ok') {
                    // 设置数据
                    this.companyName = res.data.name // 企业名称
                    this.exhibitionContentData.holderG.data = res.data.holder // 股东
                    this.exhibitionContentData.staffG.data = res.data.staff // 高管
                    this.exhibitionContentData.inverstG.data = res.data.inverst // 分支机构
                    this.exhibitionContentData.historyHolderG.data = res.data.historyHolder // 历史股东
                    this.exhibitionContentData.historyLegalG.data = res.data.historyLegal // 历史法定代表人
                    // 初始化svg
                    this.initSvg()
                }
            })
            .finally(() => (this.isLoading = false))
        },
        // 初始化svg
        initSvg() {
            if (!d3) return
            // 获取屏幕宽高
            this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
            this.screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            // 创建缩放zoom
            this.zoomHandler = d3
                .zoom()
                .scaleExtent([0.4, 10]) // 缩放范围
                .on('zoom', () => {
                    const { k, x, y } = d3.event.transform
                    let transform = `translate(${x},${y}) scale(${k})`
                    if (this.isRotate) {
                        transform = `rotate(-90) translate(${-y},${x}) scale(${k})`
                    }
                    // 设置缩放数据
                    d3.select('svg')
                        .select('g')
                        .attr('transform', transform)
                })
            // 创建svg画布
            const realWidth = this.isRotate ? this.screenHeight : this.screenWidth
            const realHeight = this.isRotate ? this.screenWidth : this.screenHeight
            this.SVG = d3
                .select('#enterprise') // d3.select() 是选择所有指定元素的第一个
                .append('svg') // 添加画布
                .attr('width', this.screenWidth) // 设置宽度
                .attr('height', this.screenHeight) // 设置高度
                .call(this.zoomHandler) // 引入缩放zoom
                .call(this.zoomHandler.translateBy, this.screenWidth / 2, this.screenHeight / 2) // 初始化位置
                .on('dblclick.zoom', null) // 阻止双击放大 影响页面单击行为以及乱放大行为
            // 创建阴影Defs组件
            // commonCreateModule.createShadowDefs(this)
            // 创建水印组件
            commonCreateModule.createWatemark(this)
            // 创建基础容器组件 并初始化位置
            this.basicsG = this.SVG.append('g').attr('id', 'basicsG')
            this.isRotate
                ? this.basicsG.attr('transform', `rotate(-90) translate(${-realWidth / 2},${realHeight / 2}) scale(1)`)
                : this.basicsG.attr('transform', `rotate(0) translate(${realWidth / 2},${realHeight / 2}) scale(1)`)
            // 创建公司名称组件
            this.createCompanyNameG()
            // 创建箭头组件
            this.createArrowsG()
            // 创建展示项组件
            this.createExhibitionContentG()
        },
        // 创建公司名称组件
        createCompanyNameG() {
            let companyNameG = this.basicsG.append('g').attr('transform', 'translate(-100,-26)')
            const companyNameGRect = companyNameG
                .append('rect')
                .attr('x', 0)
                .attr('y', 0)
                .attr('rx', 2)
                .attr('ry', 2)
                .attr('width', 200)
                .attr('height', 52)
                .attr('fill', 'rgb(0, 132, 255)')
                .attr('opacity', 0.8)
            let companyNameText = companyNameG
                .append('text')
                .attr('y', 19)
                .attr('font-size', '14px')
                .attr('fill', '#fff')
                .attr('font-weight', 'bold')
            companyNameText
                .append('tspan')
                .text(this.companyName.slice(0, 12))
                .attr('x', this.companyName.length > 12 ? 16 : 100 - this.companyName.length * 7)
                .attr('dy', '0.8em')
            companyNameText
                .append('tspan')
                .text(this.companyName.slice(12))
                .attr('x', 100 - (this.companyName.length - 12) * 7)
                .attr('dy', '1.4em')
            if (this.companyName.length > 12) {
                companyNameGRect.attr('height', 70)
            }
        },
        // 创建箭头组件
        createArrowsG() {
            Object.keys(this.exhibitionContentData).forEach(key => {
                let item = this.exhibitionContentData[key]
                this.basicsG
                    .append('g')
                    .append('polygon')
                    .attr('points', '0,0 20,0 20,-6 30,1 20,8 20,2 0,2')
                    .attr('transform', item.arrowsIcon)
                    .attr('fill', 'rgb(0, 132, 255)')
                    .attr('opacity', 0.5)
            })
        },
        // 创建展示项组件
        createExhibitionContentG() {
            const _that = this
            Object.keys(this.exhibitionContentData).forEach(key => {
                let item = this.exhibitionContentData[key]
                const contentG = this.basicsG
                    .append('g')
                    .attr('transform', item.translate)
                    .attr('cursor', 'pointer')
                    .attr('id_name', key)
                    .attr('class', 'contentG')
                    .on('mouseover', function() {
                        d3.select(this)
                            .select('rect')
                            .attr('opacity', 0.3)
                    })
                    .on('mouseout', function() {
                        d3.select(this)
                            .select('rect')
                            .attr('opacity', 0.15)
                    })
                    .on('click', function() {
                        if (!item.data.length) return
                        // 判断当前是否为展开状态
                        const isShowExpand =
                            d3
                                .select(this)
                                .select('path')
                                .attr('d') == _that.EXPAND_ICON
                        // 如果为展开行为则绘制该展示项下所有数据
                        _that.createExpandG(isShowExpand, d3.select(this).attr('id_name'))
                        d3.select(this)
                            .select('path')
                            .attr('d', isShowExpand ? _that.COLLAPSE_ICON : _that.EXPAND_ICON)
                    })
                contentG
                    .append('g')
                    .append('rect')
                    .attr('rx', 2)
                    .attr('ry', 2)
                    .attr('width', item.width)
                    .attr('height', 56)
                    .attr('fill', item.fill)
                    .attr('opacity', 0.15)
                // 添加内容组件
                const contentGTitle = contentG.append('g').attr('transform', item.content.translate)
                contentGTitle
                    .append('text')
                    .attr('x', item.content.text1.x)
                    .attr('y', item.content.text1.y)
                    .attr('font-size', '12px')
                    .attr('fill', '#333')
                    .attr('font-weight', 'bold')
                    .text(item.name)
                contentGTitle
                    .append('text')
                    .attr('x', item.content.text2.x)
                    .attr('y', item.content.text2.y)
                    .attr('font-size', '12px')
                    .attr('fill', '#666')
                    .text(item.data.length)
                // 判断是否有数据 如果存在数据 则渲染图标
                if (item.data.length) {
                    // 图标组件
                    const contentGIcon = contentG.append('g').attr('transform', item.icon.translate)
                    contentGIcon
                        .append('circle')
                        .attr('r', 6)
                        .attr('fill', 'none')
                        .attr('stroke', item.fill)
                        .attr('stroke-width', 1)
                    contentGIcon
                        .append('path')
                        .attr('x', 0)
                        .attr('y', 0)
                        .attr('d', this.COLLAPSE_ICON)
                        .attr('fill', item.fill)
                    // 创建扩展展示组件
                    this.createExpandG(true, key)
                }
            })
        },
        // 创建扩展展示组件
        createExpandG(isCreateG, idName) {
            // 是否为创建扩展G
            if (isCreateG) {
                if (d3.select(`#${idName}`)._groups[0][0] || !this.exhibitionContentData[idName].data.length) return
                this[`create${idName[0].toUpperCase() + idName.slice(1)}`](idName)
            } else {
                // 删除扩展G
                d3.select(`#${idName}`).remove()
            }
        },
        // 创建对外投资扩展组件
        createInverstG(idName) {
            const inverstG = this.basicsG.append('g').attr('id', 'inverstG')
            // 绘制基础线
            inverstG
                .append('g')
                .append('path')
                .attr('stroke-width', '1px')
                .attr('fill', 'none')
                .attr('fill-opacity', 0)
                .attr(
                    'd',
                    `M260,-96L284,-96L284,${
                        this.exhibitionContentData[idName].data.length > 1 ? -32 - this.exhibitionContentData[idName].data.length * 62 : -96
                    }`
                )
                .attr('stroke', '#DBC5E9')
            this.exhibitionContentData[idName].data.forEach((item, index) => {
                inverstG
                    .append('g')
                    .append('path')
                    .attr('stroke-width', '1px')
                    .attr('fill', 'none')
                    .attr('fill-opacity', 0)
                    .attr('d', `M284 ${index ? -94 - index * 62 + ' A 2 2 0 0 1 286' : ''} ${-96 - index * 62} H 343.5`)
                    .attr('stroke', '#DBC5E9')
                const basicsGNode = inverstG.append('g').attr('transform', `translate(344, ${-122 - index * 62})`)
                const amountStr = `认缴金额: ${item.amount || '未知'}`
                const length = item.name.length >= amountStr.length ? item.name.length : amountStr.length
                basicsGNode
                    .append('rect')
                    .attr('x', 0)
                    .attr('rx', 2)
                    .attr('ry', 2)
                    .attr('width', 32 + 12 * length)
                    .attr('height', 52)
                    .attr('fill', '#fff')
                    .attr('fill-opacity', 0.3)
                    .attr('opacity', 1)
                    .attr('stroke', '#DBC5E9')
                basicsGNode
                    .append('text')
                    .attr('x', 16)
                    .attr('y', 19)
                    .attr('opacity', 1)
                    .attr('font-size', '12px')
                    .text(item.name)
                basicsGNode
                    .append('text')
                    .attr('x', 16)
                    .attr('y', 42)
                    .attr('opacity', 1)
                    .attr('font-size', '12px')
                    .attr('fill', '#666')
                    .text(amountStr)
                basicsGNode
                    .append('text')
                    .attr('x', -46)
                    .attr('y', 20)
                    .attr('font-size', '12px')
                    .text(item.percent.replace('.00', ''))
                    .attr('fill', '#B88CD3')
            })
        },
        // 创建股东扩展组件
        createHolderG(idName) {
            const holderG = this.basicsG.append('g').attr('id', 'holderG')
            // 绘制基础线
            holderG
                .append('g')
                .append('path')
                .attr('stroke-width', '1px')
                .attr('fill', 'none')
                .attr('fill-opacity', 0)
                .attr(
                    'd',
                    `M-260,-94L-284,-94L-284, ${
                        this.exhibitionContentData[idName].data.length > 1 ? -54 - this.exhibitionContentData[idName].data.length * 38 : -94
                    }`
                )
                .attr('stroke', '#F3BDB6')
            this.exhibitionContentData[idName].data.forEach((item, index) => {
                holderG
                    .append('g')
                    .append('path')
                    .attr('stroke-width', '1px')
                    .attr('fill', 'none')
                    .attr('fill-opacity', 0)
                    .attr('d', `M-284 ${index ? -92 - index * 38 + ' A 2 2 0 0 0 -286' : ''} ${-94 - index * 38} H -343.5`)
                    .attr('stroke', '#F3BDB6')
                const basicsGNode = holderG.append('g').attr('transform', `translate(-344, ${-108 - index * 38})`)
                basicsGNode
                    .append('rect')
                    .attr('x', -32 - 12 * item.name.length)
                    .attr('rx', 2)
                    .attr('ry', 2)
                    .attr('width', 32 + 12 * item.name.length)
                    .attr('height', 28)
                    .attr('fill', '#fff')
                    .attr('fill-opacity', 0.3)
                    .attr('opacity', 1)
                    .attr('stroke', '#F3BDB6')
                basicsGNode
                    .append('text')
                    .attr('x', -16 - 12 * item.name.length)
                    .attr('y', 19)
                    .attr('opacity', 1)
                    .attr('font-size', '12px')
                    .text(item.name)
                basicsGNode
                    .append('text')
                    .attr('x', 8)
                    .attr('y', 8)
                    .attr('font-size', '12px')
                    .text(item.percent.replace('.00', ''))
                    .attr('fill', '#E67B6D')
            })
        },
        // 创建高管扩展组件
        createStaffG(idName) {
            const staffG = this.basicsG.append('g').attr('id', 'staffG')
            // 绘制基础线
            staffG
                .append('g')
                .append('path')
                .attr('stroke-width', '1px')
                .attr('fill', 'none')
                .attr('fill-opacity', 0)
                .attr('d', `M-260,0L-284,0L-284, ${(this.exhibitionContentData[idName].data.length - 1) * 38}`)
                .attr('stroke', '#A4D3E3')
            this.exhibitionContentData[idName].data.forEach((item, index) => {
                staffG
                    .append('g')
                    .append('path')
                    .attr('stroke-width', '1px')
                    .attr('fill', 'none')
                    .attr('fill-opacity', 0)
                    .attr('d', `M-284 ${index ? 36 + (index - 1) * 38 + ' A 2 2 0 0 1 -286' : ''} ${index * 38} H -343.5`)
                    .attr('stroke', '#A4D3E3')
                const basicsGNode = staffG.append('g').attr('transform', `translate(-344, ${-14 + index * 38})`)
                const length = item.name.length + item.typeJoin.length
                basicsGNode
                    .append('rect')
                    .attr('x', -40 - 12 * length)
                    .attr('rx', 2)
                    .attr('ry', 2)
                    .attr('width', 40 + 12 * length)
                    .attr('height', 28)
                    .attr('fill', '#fff')
                    .attr('fill-opacity', 0.3)
                    .attr('opacity', 1)
                    .attr('stroke', '#A4D3E3')
                basicsGNode
                    .append('text')
                    .attr('x', -24 - 12 * length)
                    .attr('y', 19)
                    .attr('opacity', 1)
                    .attr('font-size', '12px')
                    .text(item.name)
                basicsGNode
                    .append('text')
                    .attr('x', -16 - 12 * item.typeJoin.length)
                    .attr('y', 19)
                    .attr('opacity', 1)
                    .attr('font-size', '12px')
                    .attr('fill', '#666')
                    .text(item.typeJoin)
            })
        },
        // 创建历史股东扩展组件
        createHistoryHolderG(idName) {
            const historyHolderG = this.basicsG.append('g').attr('id', 'historyHolderG')
            // 绘制基础线
            historyHolderG
                .append('g')
                .append('path')
                .attr('stroke-width', '1px')
                .attr('fill', 'none')
                .attr('fill-opacity', 0)
                .attr('d', `M-246,125L-246,125L-246, ${114 + this.exhibitionContentData[idName].data.length * 56}`)
                .attr('stroke', '#FFCBA3')
            this.exhibitionContentData[idName].data.forEach((item, index) => {
                historyHolderG
                    .append('g')
                    .append('path')
                    .attr('stroke-width', '1px')
                    .attr('fill', 'none')
                    .attr('fill-opacity', 0)
                    .attr('d', `M-246 ${index ? 167 + index * 56 + ' A 2 2 0 0 0 -244' : ''} ${169 + index * 56} H -226.5`)
                    .attr('stroke', '#FFCBA3')
                const basicsGNode = historyHolderG.append('g').attr('transform', `translate(-226, ${149 + index * 56})`)
                const basicsGNodeRect = basicsGNode
                    .append('rect')
                    .attr('x', 0)
                    .attr('rx', 2)
                    .attr('ry', 2)
                    .attr('height', 40)
                    .attr('fill', '#fff')
                    .attr('fill-opacity', 0.3)
                    .attr('opacity', 1)
                    .attr('stroke', '#FFCBA3')
                const basicsGNodeText = basicsGNode
                    .append('text')
                    .attr('x', 16)
                    .attr('y', 5)
                    .attr('opacity', 1)
                    .attr('font-size', '12px')
                const basicsGNodeTextFirstTspan = basicsGNodeText
                    .append('tspan')
                    .attr('x', 16)
                    .attr('dy', 14)
                    .text(item.name.slice(0, 14))
                // 字数判断
                if (item.name.length > 14) {
                    basicsGNodeRect.attr('width', 200)
                    basicsGNodeTextFirstTspan.attr('dy', 12)
                    basicsGNodeText
                        .append('tspan')
                        .attr('x', 16)
                        .attr('dy', 14)
                        .text(item.name.slice(14))
                } else {
                    basicsGNodeText.attr('y', 10)
                    basicsGNodeRect.attr('width', 32 + 12 * item.name.length)
                }
            })
        },
        // 创建历史法定代表人扩展组件
        createHistoryLegalG(idName) {
            const historyLegalG = this.basicsG.append('g').attr('id', 'historyLegalG')
            // 绘制基础线
            historyLegalG
                .append('g')
                .append('path')
                .attr('stroke-width', '1px')
                .attr('fill', 'none')
                .attr('fill-opacity', 0)
                .attr('d', `M146,125L146,125L146, ${114 + this.exhibitionContentData[idName].data.length * 56}`)
                .attr('stroke', '#FFCBA3')
            this.exhibitionContentData[idName].data.forEach((item, index) => {
                historyLegalG
                    .append('g')
                    .append('path')
                    .attr('stroke-width', '1px')
                    .attr('fill', 'none')
                    .attr('fill-opacity', 0)
                    .attr('d', `M146 ${index ? 167 + index * 56 + ' A 2 2 0 0 0 148' : ''} ${169 + index * 56} H 165.5`)
                    .attr('stroke', '#FFCBA3')
                const basicsGNode = historyLegalG.append('g').attr('transform', `translate(166, ${149 + index * 56})`)
                basicsGNode
                    .append('rect')
                    .attr('x', 0)
                    .attr('y', 6)
                    .attr('rx', 2)
                    .attr('ry', 2)
                    .attr('width', 32 + 12 * item.name.length)
                    .attr('height', 28)
                    .attr('fill', '#fff')
                    .attr('fill-opacity', 0.3)
                    .attr('opacity', 1)
                    .attr('stroke', '#FFCBA3')
                const basicsGNodeText = basicsGNode
                    .append('text')
                    .attr('x', 16)
                    .attr('y', 10)
                    .attr('opacity', 1)
                    .attr('font-size', '12px')
                basicsGNodeText
                    .append('tspan')
                    .attr('x', 16)
                    .attr('dy', 14)
                    .text(item.name)
            })
        },
        // 创建分支扩展组件
        createBranchG(idName) {
            const branchG = this.basicsG.append('g').attr('id', 'branchG')
            // 绘制基础线
            branchG
                .append('g')
                .append('path')
                .attr('stroke-width', '1px')
                .attr('fill', 'none')
                .attr('fill-opacity', 0) // M260,0L284,0L284,302
                .attr('d', `M260,0L284,0L284, ${(this.exhibitionContentData[idName].data.length - 1) * 38}`)
                .attr('stroke', '#BAD5B3')
            this.exhibitionContentData[idName].data.forEach((item, index) => {
                branchG
                    .append('g')
                    .append('path')
                    .attr('stroke-width', '1px')
                    .attr('fill', 'none')
                    .attr('fill-opacity', 0)
                    .attr('d', `M284 ${index ? 36 + (index - 1) * 38 + ' A 2 2 0 0 0 286' : ''} ${index * 38} H 343.5`)
                    .attr('stroke', '#BAD5B3')
                const basicsGNode = branchG.append('g').attr('transform', `translate(344, ${-14 + index * 38})`)
                basicsGNode
                    .append('rect')
                    .attr('x', 0)
                    .attr('rx', 2)
                    .attr('ry', 2)
                    .attr('width', 32 + 12 * item.name.length)
                    .attr('height', 28)
                    .attr('fill', '#fff')
                    .attr('fill-opacity', 0.3)
                    .attr('opacity', 1)
                    .attr('stroke', '#BAD5B3')
                basicsGNode
                    .append('text')
                    .attr('x', 16)
                    .attr('y', 19)
                    .attr('opacity', 1)
                    .attr('font-size', '12px')
                    .text(item.name)
            })
        },
        // 重置SVG
        onResetSVG() {
            // 删除原svg
            d3.select('svg').remove()
            // 重制svg
            this.initSvg()
        },
        // 退出页面
        onExitPage() {
            commonIncident.onExitPage(this)
        },
        // 旋转页面
        onRotateSVG() {
            commonIncident.onRotateSVG(this)
        },
        // 全屏展示
        onFullScreen() {
            commonIncident.onFullScreen(this)
        },
        // 放大SVG
        onMagnifySVG() {
            commonIncident.onMagnifySVG(this)
        },
        // 缩小SVG
        onShrinkSVG() {
            commonIncident.onShrinkSVG(this)
        },
        // 展示/收起所有扩展项
        onShowExpandAll() {
            // 切换图标
            d3.selectAll('.contentG')
                .selectAll('path')
                .attr('d', this.isShowExpandAll ? this.EXPAND_ICON : this.COLLAPSE_ICON)
            // 创建或删除所有扩展项
            Object.keys(this.exhibitionContentData).forEach(key => this.createExpandG(!this.isShowExpandAll, key))
            // 重置数据
            this.isShowExpandAll = !this.isShowExpandAll
        },
        // 下载图片
        onDownload() {
            commonIncident.onDownload(this, this.companyName)
        },
    }
}
</script>

<style scoped lang="stylus">
@import './enterprise.styl'
</style>
